<template>
  <div class="gold-shop-wrap">
    <van-nav-bar
      title="线下店铺入驻"
      left-arrow
      fixed
      @click-left="onClickLeft"
      :right-text="
        shopInfo.status == 10
          ? '审核中'
          : shopInfo.status == 20
          ? '审核失败'
          : shopInfo.status == 30
          ? '进件中'
          : shopInfo.status == 40
          ? '进件失败'
          : shopInfo.status == 100
          ? '收款二维码'
          : shopInfo.status == 110
          ? '已禁用'
          : '关闭'
      "
      @click-right="onClickRight"
      :class="{ scrolled: isScrolled }"
    />
    <div class="custom-navbar">
      <div class="custom-box">
        <!-- <div class="custom_title">店铺申请</div> -->
        <div class="step-container">
          <div v-for="(step, index) in steps" :key="index" class="step-wrapper">
            <div :class="['step', { completed: index <= active }]">
              {{ index + 1 }}
            </div>
            <div class="step-label">{{ step }}</div>
          </div>
        </div>
      </div>
      <!--  -->
    </div>
    <div class="custom-content">
      <basic-info
        v-if="active === 0 && shopInfo"
        :info="shopInfo"
        @basicInfo="getBasicInfo"
      ></basic-info>
      <enterprise-info
        v-if="active === 1 && shopInfo"
        :info="shopInfo"
        @enterprise="getEnterprise"
        @goBack="backBtn"
      ></enterprise-info>
      <settle-info
        v-if="active === 2 && shopInfo"
        :info="shopInfo"
        @settle="getBankCardInfo"
        @backBtn="backBtn"
      ></settle-info>
      <!-- <div style="position: fixed;bottom: 60px;width: 100%">
                <van-button round block type="info" @click="onDraft" style="width: 95%;margin: 0.32rem auto;"
                    color="linear-gradient(to right, #FF5851, #E9011B)">暂存</van-button>
            </div> -->
      <!-- <van-button round block type="info"  style="width: 95%;margin: 0.32rem auto;"
      color="linear-gradient(to right, #FF5851, #E9011B)">暂存</van-button> -->
    </div>
    <van-popup v-model="showPopup" round :style="{ width: '80%' }">
      <div class="popup-content">
        <img
          v-if="shopInfo.status == 100"
          src="../../../images/mine/success.png"
        />
        <img v-else src="../../../images/mine/fail.png" />
        <div class="popup-title" v-if="shopInfo.status != 100">
          审核通知
        </div>
        <div class="popup-text">
          {{ shopInfo.audit_reason }}
        </div>
        <van-button
          round
          block
          type="info"
          @click="showPopup = false"
          style="width: 50%;margin: 0.32rem auto;"
          color="linear-gradient(to right, #FF5851, #E9011B)"
          >确定</van-button
        >
      </div>
    </van-popup>
  </div>
</template>
<script>
import basicInfo from "./components/basicInfo.vue";
import enterpriseInfo from "./components/enterpriseInfo.vue";
import settleInfo from "./components/settleInfo.vue";
// import bankCardInfo from './components/bankCardInfo.vue'
import { STORE_COMMIT } from "@/api/mine";
export default {
  components: { basicInfo, enterpriseInfo, settleInfo },
  data() {
    return {
      showPopup: false,
      active: null,
      steps: ["基本信息", "企业信息", "结算信息"],
      isScrolled: false,
      shopInfo: {},
    };
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
    window.scrollTo(0, 0)

	const id = this.$route.query.id || 0;
    this.$http.get(`/store/manage/${id}/info`).then((res) => {
      // console.log(res);
      this.shopInfo = res.data;
      this.active= 0
      if(res.data.status==20 || res.data.status==110 || res.data.status==40){
        this.examine(res.data.status);
      }else if(res.data.status==100 ){
        // 已通过
      }
    });
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.handleScroll);
  },
  methods: {
    // 审核失败
    examine(status) {
      this.showPopup = true;
    },
    backBtn(val) {
      this.active = val;
    },
    onClickLeft() {
      this.$router.back();
    },
    onClickRight() {
      if (this.statusShow) {
        this.$router.push("/examineNotify");
      } else if(this.shopInfo.status==100){
        this.$router.push(`/authSuccess?id=${this.$route.query.id }`)
      } else if(this.shopInfo.status == -1) {
		  // 新增时
		  this.$router.back();
	  }
    },
    // ... 其他现有方法 ...
    handleScroll() {
      this.isScrolled = window.scrollY > 26;
    },
    // 基本信息
    getBasicInfo(value) {
      console.log(value);
      this.audit_reason = value.audit_reason;
      this.shopInfo.contacts = value.contacts;
      this.shopInfo.subsidy_config_id = value.subsidy_config_id;
      this.shopInfo.name = value.name;
      this.shopInfo.phone = value.phone;
      this.shopInfo.email = value.email;
      this.active = 1;
    },
    // 企业信息
    getEnterprise(business_license, params, image, legal) {

      this.shopInfo.business_license = business_license;
      // this.shopInfo.params=params
      this.shopInfo.address = params.address;
      this.shopInfo.cate_id = params.cate_id;
      this.shopInfo.cate_name = params.cate_name;
      this.shopInfo.region_code = params.region_code;
      this.shopInfo.region_name = params.region_name;
      this.shopInfo.company_type = params.company_type;
      this.shopInfo.cover_url = params.cover_url;
      this.shopInfo.longitude = params.longitude;
      this.shopInfo.latitude = params.latitude;
      // 图片
      this.shopInfo.image_data.head_image_url = image.head_image_url;
      this.shopInfo.image_data.inside_image_url = image.inside_image_url;
      this.shopInfo.image_data.check_out_image_url = image.check_out_image_url;
      this.shopInfo.image_data.company_front_image_url=image.company_front_image_url
      // 法人
      this.shopInfo.legal_person = legal;
    //   console.log(this.shopInfo);

      this.active = 2;
    },
    // 法人信息
    getlegalPerson(value) {
    //   console.log(value);
      this.active = 3;
    },
    // 银行卡信息
    getBankCardInfo(value, settler_data,data) {
    //   console.log(value, 6666);
      if (settler_data == 0) {
        this.shopInfo.account_data = value;
      } else {
        this.shopInfo.account_data = value;
        this.shopInfo.settler_data = settler_data;
        // this.shopInfo.settler_data.front_url =data.front_url;
        // this.shopInfo.settler_data.back_url =data.back_url;
      }

      // this.shopInfo.password = "123456";
    //   console.log(this.shopInfo);
      this.$http.post(STORE_COMMIT, this.shopInfo).then((res) => {
        // console.log(res);
        if (res.code == 200) {
          this.$toast.success("提交成功");

          localStorage.removeItem("accountData")
          localStorage.removeItem("accountDataNo")
          localStorage.removeItem('accountDataPubilc')
          localStorage.removeItem('shopSettleInfo')
          localStorage.removeItem('enterpriseInfo')
          this.$router.push("/mine");
        } else {
          this.$toast.fail(res.msg);
        }
      });
    },
  },
};
</script>
<style scoped lang="scss">
.gold-shop-wrap {
  // min-height: 100vh;
  padding-top: 46px;

  // background: #F2F4F5;
  ::v-deep .van-hairline--bottom::after {
    border: none;
  }

  ::v-deep .van-icon {
    color: #fff;
  }

  ::v-deep .van-nav-bar__title {
    color: #fff;
  }

  ::v-deep .van-nav-bar__arrow {
    font-size: 20px;
  }

  ::v-deep .van-nav-bar__text {
    color: #fff;
  }

  ::v-deep .van-nav-bar {
    background: transparent;
    position: fixed; // 改为固定定位
    top: 0; // 添加这行
    left: 0; // 添加这行
    right: 0; // 添加这行
    z-index: 1000; // 添加这行，确保它在其他元素之上

    // position: fixed;
    &.scrolled {
      background-color: #ffffff; // 或者你想要的任何颜色

      .van-nav-bar__title,
      .van-icon,
      .van-nav-bar__text {
        color: #333; // 滚动后变为黑色
      }
    }
  }
}
.popup-content{
    // width:80%;
    height:auto;
    padding:.3rem;
    box-sizing:border-box;
    text-align:center;
    img{
        width:1.2rem;
    }
    .popup-title{
        font-family: PingFangSC, PingFang SC;
font-weight: 600;
font-size: .36rem;
color: #333333;
font-style: normal;
    }
    .popup-text{
        margin-top:.3rem;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: .28rem;
        color: #666666;
        white-space: pre-wrap;
        word-wrap: break-word;
    }
}
/* 设置自定义 NavBar 的背景图片 */
.custom-navbar {
  background-image: url("../../../images/mine/img_beij3.png");
  /* 替换为你的图片路径 */
  background-size: cover;
  /* 背景图片覆盖整个元素 */
  background-position: center;
  /* 背景图片居中 */
  position: relative;
  /* 相对定位 */
  top: -46px;
  /* 根据你的 NavBar 高度调整，Vant UI 默认 NavBar 高度为 46px */
  width: 100%;

  /* 宽度与父元素相同 */
  // height: 46px;
  /* NavBar 的高度 */
  // z-index: 1;
  /* 确保位于 NavBar 之上 */
  .custom-box {
    padding-top: 60px;

    .custom_title {
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 0.32rem;
      color: #ffffff;
      line-height: 0.44rem;
      // text-align: left;
      padding: 0 0.32rem;
      padding-bottom: 0.32rem;
      font-style: normal;
    }
  }
}

.step-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  padding-bottom: 0.52rem;
  // max-width: 600px;
  // margin: 0 auto 20px;
}

.step-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.step-wrapper:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 15px;
  left: 80%;
  width: 40%;
  height: 1px;
  background-color: #fff;
  opacity: 0.5;
  z-index: 1;
}

.step {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #fff;
  opacity: 0.6;
  color: #ff0000;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  margin-bottom: 5px;
  position: relative;
  z-index: 2;
  transition: all 0.3s ease;
}

.step.completed {
  opacity: 1;
  background-color: #fff;
  // border: 1px solid #ff0000;
}

.step-label {
  font-size: 12px;
  color: #fff;
  text-align: center;
}

.next-button {
  display: block;
  margin: 20px auto;
  padding: 10px 20px;
  background-color: #ff0000;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.next-button:hover {
  background-color: #cc0000;
}

.custom-content {
  width: 100%;
  // height: 100vh;
  background: #fff;
  margin-top: -55px;
  padding-top: 0.32rem;
  position: relative;
  z-index: 999;
  border-radius: 12px 12px 0px 0px;
}
</style>
